import {connect} from "react-redux";
import React, {useEffect, useState} from "react";
import '../../../assets/scss/pages/tasks.scss'
import Breadcrumbs from "../../../components/@vuexy/breadCrumbs/BreadCrumb";
import Sidebar from "react-sidebar";
import TaskSidebar from "./Sidebar";
import TaskContent from "./Content";
import FullSpinnerDimming from "../../../components/@vuexy/spinner/Full-spinner-dimming";
import AddTaskForm from "./AddTaskForm";
import {Fade} from "reactstrap";
import {Slide} from "react-toastify";
import {Collapse} from "reactstrap";


const mql = window.matchMedia(`(min-width: 992px)`)

const Tasks = props => {
  const {projects, params} = props
  const {} = props
  const [sidebarOpen, setSidebarOpen] = useState(false)
  const [sidebarDocked, setSidebarDocked] = useState(mql.matches)
  const [sidebarHeight, setSidebarHeight] = useState(null)

  useEffect(() => {
    mql.addListener(mediaQueryChanged)
    return () => {
      mql.removeListener(mediaQueryChanged)
    }
  }, []);

  const mediaQueryChanged = () => {
    setSidebarOpen(false)
    setSidebarDocked(mql.matches)
  }

  return (
    <div>
      <Breadcrumbs
        breadCrumbTitle="Задачи"
        breadCrumbActive="Задачи"
      />
      {props.spinner.includes('tasks-list') && <FullSpinnerDimming/>}
      <div className="ecommerce-application position-relative"
           style={{minHeight: sidebarHeight}}>
        <Fade className="fade-addForm"  in={params.isOpenModal} unmountOnExit>
          <AddTaskForm minHeight={sidebarHeight}/>
        </Fade>
        {sidebarOpen && <div
          className={`shop-content-overlay ${
            sidebarOpen ? "show" : ""
          }`}
          onClick={() => setSidebarOpen(false)}/>
        }
        <div className="sidebar-section">
          <Sidebar
            sidebar={<TaskSidebar setSidebarOpen={setSidebarOpen} setSidebarHeight={setSidebarHeight}/>}
            docked={sidebarDocked}
            open={sidebarOpen}
            sidebarClassName="sidebar-shop"
            touch={true}
            contentClassName="sidebar-children d-none">
            ""
          </Sidebar>
        </div>
        <TaskContent
          mainSidebar={setSidebarOpen}
          sidebar={sidebarOpen}
        />
      </div>
    </div>
  )
}

const mapStateToProps = state => ({
  reqParams: state.tasks.reqParams,
  meta: state.tasks.meta,
  projects: state.projects.list,
  spinner: state.helper.spinner,
  params: state.tasks.params,
});
export default connect(mapStateToProps, {})(Tasks)
